<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>controller</title>
    <link rel="stylesheet" href="../lib/bootstrap3/css/bootstrap.min.css">
    <script src="../lib/jquery/jquery-1.10.2.js"></script>
    <script src="../lib/angularjs/angular.min.js"></script>
    <style>
        body{padding:50px 200px;}
    </style>
    <script>
        var app=angular.module("app01",[]);
    </script>
</head>
<body ng-app="app01">
<h3>编译函数负责对模板dom进行转换，链接函数负责作用域与dom进行链接</h3>
<DIV CLASS="panel panel-success">
    <div class="panel-heading">例子一</div>
    <div class="panel-body">
        <one-leave>
            <two-leave>
                <three-leave></three-leave>
            </two-leave>
        </one-leave>
    </div>
    <script>
        function createDirective(name) {
            return function () {
                return {
                    restrict:'E',
                    compile:function (tElement,tAttr) {
                        console.log(name+': complie');
                        return {
                            pre:function (scope,iEle,iAttr) {                                console.log(name+'- pre link');                            },
                            post:function (scope, iEle, iAttr) {                                console.log(name+"-- post link");                            }
                        }
                    }
                }
            }
        }
        app.directive("oneLeave",createDirective('oneLeave'));
        app.directive("twoLeave",createDirective('twoLeave'));
        app.directive("threeLeave",createDirective('threeLeave'));
    </script>
    <div class="panel-footer">
        compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。
    </div>
</DIV>
<DIV CLASS="panel panel-success">
    <div class="panel-heading">例子二</div>
    <div class="panel-body">
        <one-leave2>        </one-leave2>
    </div>
    <script>
        function createDirective2(name) {
            return function () {
                return {
                    restrict:'E',
                    compile: function(tEle, tAttrs, transcludeFn) {
                        var tplEl = angular.element('<div><h2></h2></div>');
                        var h2 = tplEl.find('h2');
                        h2.attr('type', tAttrs.type);
                        h2.attr('ng-model', tAttrs.ngModel);
                        h2.val("hello");
                        tEle.replaceWith(tplEl);
                        tEle.append(h2);
                        return function(scope, ele, attrs) {

                        };
                    }
                }
            }
        }
        app.directive("oneLeave2",createDirective('oneLeave2'));
    </script>
    <div class="panel-footer">
        compile和link选项是互斥的。如果同时设置了这两个选项，那么会把compile所返回的函数当作链接函数，而link选项本身则会被忽略。
    </div>
</DIV>
</body>
</html>